<template>
  <div class="vendorEngineering">
    <div class="title">
      {{ $t("scheduleManager.vendorEngineering.title") }} <!--厂商评鉴管理（工程类） 协力厂商服务绩效评鉴表-工程类-->
    </div>
    <div class="yt-box-flex">
      <div class="flex-grid">
        <div class="flex-col flex-bg"> {{ $t("scheduleManager.vendorEngineering.projectName") }}</div>
        <div class="flex-col colspan-2-4 ">
          {{ appraiseData.projectName }}
        </div>
        <div class="flex-col flex-bg"> {{ $t("scheduleManager.vendorEngineering.projectNo") }}</div>
        <div class="flex-col colspan-7-3 ">
          {{ appraiseData.projectNo }}
        </div>

        <div class="flex-col flex-bg"> {{ $t("scheduleManager.vendorConsumables.vendorNo") }}</div>
        <div class="flex-col colspan-2-4 ">
          {{ appraiseData.vendorNo }}
        </div>
        <div class="flex-col flex-bg">{{ $t("scheduleManager.vendorEngineering.vendorName") }}</div>
        <div class="flex-col colspan-7-3 ">
          {{ appraiseData.vendorName }}
        </div>
        <div class="flex-col flex-bg">{{ $t("scheduleManager.vendorConsumables.vendorItem") }}</div>
        <div class="flex-col colspan-2-4" v-html="vendorItem">
        </div>
        <div class="flex-col flex-bg">{{ $t("scheduleManager.vendorEngineering.appraiseTime") }}</div>
        <div
          class="flex-col colspan-7-3"
          style="text-align: center;"
        >
          <el-date-picker
            v-model="assessStartDate"
            type="date"
            style="width: 130px"
            :placeholder="$t('scheduleManager.vendorEngineering.placeholder.startTime')"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd"
          >
          </el-date-picker>
          -
          <el-date-picker
            v-model="assessEndDate"
            type="date"
            style="width: 130px"
            :placeholder="$t('scheduleManager.vendorEngineering.placeholder.endTime')"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd"
          >
          </el-date-picker>
        </div>
        <div class="flex-col flex-bg">{{ $t("scheduleManager.vendorEngineering.jobContent") }}</div>
        <div class="flex-col colspan-2-8" style="text-align: center;">
          <el-input
            v-model="appraiseData.jobContent"
            :placeholder="$t('scheduleManager.vendorEngineering.placeholder.jobContent')"
            clearable
            class="filter-item"
          ></el-input>
        </div>

        <div class="flex-col flex-bg colspan-1-3">以下項目若無特別說明，請依照此方式評分: <br>
          優(8~10) 良(6~8) 可(4~6) 缺(2~4) 劣(0~2)</div>
        <!--<div class="flex-col flex-bg">{{ $t("scheduleManager.vendorEngineering.evaluationProject") }}</div>
        <div class="flex-col flex-bg">{{ $t("scheduleManager.vendorEngineering.partition") }}</div>-->
        <div class="flex-col flex-bg colspan-4-2">{{ $t("scheduleManager.vendorEngineering.explain") }}</div>
        <div class="flex-col flex-bg">{{ $t("scheduleManager.vendorEngineering.score") }}</div>
        <div class="flex-col flex-bg colspan-7-3">{{ $t("scheduleManager.vendorEngineering.uncheck") }}</div>

        <div class="flex-col flex-bg coldiv-6-22">工務評鑒項目</div>
        <div class="flex-col flex-bg coldiv-6-3">{{ $t("scheduleManager.vendorEngineering.deliveryProportion") }}</div> <!--coldiv-6-3-->
        <div class="flex-col flex-bg">{{ $t("scheduleManager.vendorEngineering.overdueConstruction") }}</div>
        <div class="flex-col flex-bg colspan-4-2 coldiv-6-3" style="flex-direction:column">
          {{ $t("scheduleManager.vendorEngineering.calculationMethod") }}
          <div class="yt-table-text" style="padding-top: 15px;width: 200px">
            {{ $t("scheduleManager.vendorEngineering.methodOne") }}
          </div>
          <div class="yt-table-text" style="padding-top: 10px;width: 200px">
            {{ $t("scheduleManager.vendorEngineering.methodTwo") }}
          </div>
        </div>
        <div class="flex-col">
          <el-select v-model="appraiseItem[0].appraiseItemScore" :placeholder="$t('scheduleManager.vendorEngineering.placeholder.score')">
            <el-option v-for="item in optionsNew" :key="item.value" :label="item.name" :value="item.value"></el-option>
          </el-select>
        </div>
        <div class="flex-col colspan-7-3">
          <el-input v-model="appraiseItem[0].appraiseItemInapplicabilityExplain" :placeholder="$t('scheduleManager.vendorEngineering.placeholder.explain')" clearable class="filter-item"></el-input>
        </div>

        <div class="flex-col flex-bg"> {{ $t("scheduleManager.vendorEngineering.overdueImprovement") }}</div>
        <div class="flex-col">
          <el-select
            v-model="appraiseItem[1].appraiseItemScore"
            :placeholder="$t('scheduleManager.vendorEngineering.placeholder.score')"
          >
            <el-option
              v-for="item in optionsNew"
              :key="item.value"
              :label="item.name"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </div>
        <div class="flex-col colspan-7-3">
          <el-input
            v-model="appraiseItem[1].appraiseItemInapplicabilityExplain"
            :placeholder="$t('scheduleManager.vendorEngineering.placeholder.explain')"
            clearable
            class="filter-item"
          ></el-input>
        </div>

        <div class="flex-col flex-bg">{{ $t("scheduleManager.vendorEngineering.frequency") }}</div>
        <div class="flex-col">
          <el-select
            v-model="appraiseItem[2].appraiseItemScore"
            :placeholder="$t('scheduleManager.vendorEngineering.placeholder.score')"
          >
            <el-option
              v-for="item in optionsNew"
              :key="item.value"
              :label="item.name"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </div>
        <div class="flex-col colspan-7-3">
          <el-input
            v-model="appraiseItem[2].appraiseItemInapplicabilityExplain"
            :placeholder="$t('scheduleManager.vendorEngineering.placeholder.explain')"
            clearable
            class="filter-item"
          ></el-input>
        </div>

        <div class="flex-col flex-bg colspan-2-4">交期總分 (30)</div>
        <div class="flex-col bgeee colspan-6-4">{{ total1 }}</div>

        <div class="flex-col flex-bg coldiv-10-4">{{ $t("scheduleManager.vendorEngineering.specificGravity") }}</div>
        <div class="flex-col flex-bg">{{ $t("scheduleManager.vendorEngineering.yield") }}</div>
        <div class="flex-col flex-bg colspan-4-2">
          {{ $t("scheduleManager.vendorEngineering.CrQualified") }}
        </div>
        <div class="flex-col">
          <el-select
            v-model="appraiseItem[3].appraiseItemScore"
            :placeholder="$t('scheduleManager.vendorEngineering.placeholder.score')"
          >
            <el-option
              v-for="item in optionsNew"
              :key="item.value"
              :label="item.name"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </div>
        <div class="flex-col colspan-7-3">
          <el-input
            v-model="appraiseItem[3].appraiseItemInapplicabilityExplain"
            :placeholder="$t('scheduleManager.vendorEngineering.placeholder.explain')"
            clearable
            class="filter-item"
          ></el-input>
        </div>

        <div class="flex-col flex-bg">{{ $t("scheduleManager.vendorEngineering.abnormal") }}</div>
        <div class="flex-col flex-bg colspan-4-2"></div>
        <div class="flex-col">
          <el-select
            v-model="appraiseItem[4].appraiseItemScore"
            :placeholder="$t('scheduleManager.vendorEngineering.placeholder.score')"
          >
            <el-option
              v-for="item in optionsNew"
              :key="item.value"
              :label="item.name"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </div>
        <div class="flex-col colspan-7-3">
          <el-input
            v-model="appraiseItem[4].appraiseItemInapplicabilityExplain"
            :placeholder="$t('scheduleManager.vendorEngineering.placeholder.explain')"
            clearable
            class="filter-item"
          ></el-input>
        </div>

        <div class="flex-col flex-bg">{{ $t("scheduleManager.vendorEngineering.safetyRegulations") }}</div>
        <div class="flex-col flex-bg colspan-4-2"></div>
        <div class="flex-col">
          <el-select
            v-model="appraiseItem[5].appraiseItemScore"
            :placeholder="$t('scheduleManager.vendorEngineering.placeholder.score')"
          >
            <el-option
              v-for="item in optionsNew"
              :key="item.value"
              :label="item.name"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </div>
        <div class="flex-col colspan-7-3">
          <el-input
            v-model="appraiseItem[5].appraiseItemInapplicabilityExplain"
            :placeholder="$t('scheduleManager.vendorEngineering.placeholder.explain')"
            clearable
            class="filter-item"
          ></el-input>
        </div>

        <div class="flex-col flex-bg">{{ $t("scheduleManager.vendorEngineering.warrantyMaintenance") }}</div>
        <div class="flex-col flex-bg colspan-4-2"></div>
        <div class="flex-col">
          <el-select
            v-model="appraiseItem[6].appraiseItemScore"
            :placeholder="$t('scheduleManager.vendorEngineering.placeholder.score')"
          >
            <el-option
              v-for="item in optionsNew"
              :key="item.value"
              :label="item.name"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </div>
        <div class="flex-col colspan-7-3">
          <el-input
            v-model="appraiseItem[6].appraiseItemInapplicabilityExplain"
            :placeholder="$t('scheduleManager.vendorEngineering.placeholder.explain')"
            clearable
            class="filter-item"
          ></el-input>
        </div>

        <div class="flex-col flex-bg colspan-2-4">品質總分 (25)</div>
        <div class="flex-col bgeee colspan-6-4">{{ total2 }}</div>

        <div class="flex-col flex-bg coldiv-15-3">{{ $t("scheduleManager.vendorEngineering.proportionOfFit") }}</div>
        <div class="flex-col flex-bg">{{ $t("scheduleManager.vendorEngineering.strainCapacity") }}</div>
        <div class="flex-col flex-bg colspan-4-2">
          {{ $t("scheduleManager.vendorEngineering.emergencySituation") }}
        </div>
        <div class="flex-col">
          <el-select
            v-model="appraiseItem[7].appraiseItemScore"
            :placeholder="$t('scheduleManager.vendorEngineering.placeholder.score')"
          >
            <el-option
              v-for="item in optionsNew"
              :key="item.value"
              :label="item.name"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </div>
        <div class="flex-col colspan-7-3">
          <el-input
            v-model="appraiseItem[7].appraiseItemInapplicabilityExplain"
            :placeholder="$t('scheduleManager.vendorEngineering.placeholder.explain')"
            clearable
            class="filter-item"
          ></el-input>
        </div>

        <div class="flex-col flex-bg">{{ $t("scheduleManager.vendorEngineering.communicationSkills") }}</div>
        <div class="flex-col flex-bg colspan-4-2">
          <div class="yt-table-text">
            {{ $t("scheduleManager.vendorEngineering.processingCapacity") }}
          </div>
        </div>
        <div class="flex-col">
          <el-select
            v-model="appraiseItem[8].appraiseItemScore"
            :placeholder="$t('scheduleManager.vendorEngineering.placeholder.score')"
          >
            <el-option
              v-for="item in optionsNew"
              :key="item.value"
              :label="item.name"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </div>
        <div class="flex-col colspan-7-3">
          <el-input
            v-model="appraiseItem[8].appraiseItemInapplicabilityExplain"
            :placeholder="$t('scheduleManager.vendorEngineering.placeholder.explain')"
            clearable
            class="filter-item"
          ></el-input>
        </div>

        <div class="flex-col flex-bg">{{ $t("scheduleManager.vendorEngineering.followAgreement") }}</div>
        <div class="flex-col flex-bg colspan-4-2"></div>
        <div class="flex-col">
          <el-select
            v-model="appraiseItem[9].appraiseItemScore"
            :placeholder="$t('scheduleManager.vendorEngineering.placeholder.score')"
          >
            <el-option
              v-for="item in optionsNew"
              :key="item.value"
              :label="item.name"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </div>
        <div class="flex-col colspan-7-3">
          <el-input
            v-model="appraiseItem[9].appraiseItemInapplicabilityExplain"
            :placeholder="$t('scheduleManager.vendorEngineering.placeholder.explain')"
            clearable
            class="filter-item"
          ></el-input>
        </div>

        <div class="flex-col flex-bg colspan-2-4">配合度總分 (15)</div>
        <div class="flex-col bgeee colspan-6-4">{{ total3 }}</div>

        <div class="flex-col flex-bg coldiv-18-5">{{ $t("scheduleManager.vendorEngineering.managementProportion") }}</div>
        <div class="flex-col flex-bg">{{ $t("scheduleManager.vendorEngineering.usability") }}</div>
        <div class="flex-col flex-bg colspan-4-2"></div>
        <div class="flex-col">
          <el-select
            v-model="appraiseItem[10].appraiseItemScore"
            :placeholder="$t('scheduleManager.vendorEngineering.placeholder.score')"
          >
            <el-option
              v-for="item in optionsNew"
              :key="item.value"
              :label="item.name"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </div>
        <div class="flex-col colspan-7-3">
          <el-input
            v-model="appraiseItem[10].appraiseItemInapplicabilityExplain"
            :placeholder="$t('scheduleManager.vendorEngineering.placeholder.explain')"
            clearable
            class="filter-item"
          ></el-input>
        </div>

        <div class="flex-col flex-bg">{{ $t("scheduleManager.vendorEngineering.proactive") }}</div>
        <div class="flex-col flex-bg colspan-4-2"></div>
        <div class="flex-col">
          <el-select
            v-model="appraiseItem[11].appraiseItemScore"
            :placeholder="$t('scheduleManager.vendorEngineering.placeholder.score')"
          >
            <el-option
              v-for="item in optionsNew"
              :key="item.value"
              :label="item.name"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </div>
        <div class="flex-col colspan-7-3">
          <el-input
            v-model="appraiseItem[11].appraiseItemInapplicabilityExplain"
            :placeholder="$t('scheduleManager.vendorEngineering.placeholder.explain')"
            clearable
            class="filter-item"
          ></el-input>
        </div>

        <div class="flex-col flex-bg">{{ $t("scheduleManager.vendorEngineering.goodCommunication") }}</div>
        <div class="flex-col flex-bg colspan-4-2"></div>
        <div class="flex-col">
          <el-select
            v-model="appraiseItem[12].appraiseItemScore"
            :placeholder="$t('scheduleManager.vendorEngineering.placeholder.score')"
          >
            <el-option
              v-for="item in optionsNew"
              :key="item.value"
              :label="item.name"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </div>
        <div class="flex-col colspan-7-3">
          <el-input
            v-model="appraiseItem[12].appraiseItemInapplicabilityExplain"
            :placeholder="$t('scheduleManager.vendorEngineering.placeholder.explain')"
            clearable
            class="filter-item"
          ></el-input>
        </div>

        <div class="flex-col flex-bg">{{ $t("scheduleManager.vendorEngineering.internationalCooperation") }}</div>
        <div class="flex-col flex-bg colspan-4-2"></div>
        <div class="flex-col">
          <el-select
            v-model="appraiseItem[13].appraiseItemScore"
            :placeholder="$t('scheduleManager.vendorEngineering.placeholder.score')"
          >
            <el-option
              v-for="item in optionsNew"
              :key="item.value"
              :label="item.name"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </div>
        <div class="flex-col colspan-7-3">
          <el-input
            v-model="appraiseItem[13].appraiseItemInapplicabilityExplain"
            :placeholder="$t('scheduleManager.vendorEngineering.placeholder.explain')"
            clearable
            class="filter-item"
          ></el-input>
        </div>

        <div class="flex-col flex-bg">{{ $t("scheduleManager.vendorEngineering.subcontractor") }}</div>
        <div class="flex-col flex-bg colspan-4-2"></div>
        <div class="flex-col">
          <el-select
            v-model="appraiseItem[14].appraiseItemScore"
            :placeholder="$t('scheduleManager.vendorEngineering.placeholder.score')"
          >
            <el-option
              v-for="item in optionsNew"
              :key="item.value"
              :label="item.name"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </div>
        <div class="flex-col colspan-7-3">
          <el-input
            v-model="appraiseItem[14].appraiseItemInapplicabilityExplain"
            :placeholder="$t('scheduleManager.vendorEngineering.placeholder.explain')"
            clearable
            class="filter-item"
          ></el-input>
        </div>

        <div class="flex-col flex-bg colspan-2-4">管理總分 (20)</div>
        <div class="flex-col bgeee colspan-6-4">{{ total4 }}</div>

        <div class="flex-col flex-bg coldiv-25-2">專業度</div>
        <div class="flex-col flex-bg">專業難題解決能力</div>
        <div class="flex-col flex-bg colspan-4-2">
          承辦人員遇施作困難能提出有效解決方案並予以解決之效率
        </div>
        <div class="flex-col">
          <el-select
            v-model="appraiseItem[15].appraiseItemScore"
            :placeholder="$t('scheduleManager.vendorEngineering.placeholder.score')"
          >
            <el-option
              v-for="item in optionsNew"
              :key="item.value"
              :label="item.name"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </div>
        <div class="flex-col colspan-7-3">
          <el-input
            v-model="appraiseItem[15].appraiseItemInapplicabilityExplain"
            :placeholder="$t('scheduleManager.vendorEngineering.placeholder.explain')"
            clearable
            class="filter-item"
          ></el-input>
        </div>

        <div class="flex-col flex-bg">專業知識與互助程度</div>
        <div class="flex-col flex-bg colspan-4-2">
          <div class="yt-table-text">
            對相關專業知識熟悉並能適時予以建議
          </div>
        </div>
        <div class="flex-col">
          <el-select
            v-model="appraiseItem[16].appraiseItemScore"
            :placeholder="$t('scheduleManager.vendorEngineering.placeholder.score')"
          >
            <el-option
              v-for="item in optionsNew"
              :key="item.value"
              :label="item.name"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </div>
        <div class="flex-col colspan-7-3">
          <el-input
            v-model="appraiseItem[16].appraiseItemInapplicabilityExplain"
            :placeholder="$t('scheduleManager.vendorEngineering.placeholder.explain')"
            clearable
            class="filter-item"
          ></el-input>
        </div>

        <div class="flex-col flex-bg colspan-2-4">專業度總分 (10)</div>
        <div class="flex-col bgeee colspan-6-4">{{ total5 }}</div>

        <div class="flex-col colspan-1-5">工務評鑑總分 (100)</div>
        <div class="flex-col colspan-6-4">{{ appraiseData.totalScore }}</div>

        <div class="flex-col flex-bg coldiv-29-8">採購評鑒項目</div>
        <div class="flex-col flex-bg coldiv-29-4">{{ $t("scheduleManager.vendorEngineering.priceProportion") }}</div>
        <div class="flex-col flex-bg">Payment term</div>
        <div class="flex-col flex-bg colspan-4-2">{{ $t("scheduleManager.vendorEngineering.tradingConditions") }}</div>
        <div class="flex-col">
          <el-select
            v-model="appraiseItem[17].appraiseItemScore"
            :placeholder="$t('scheduleManager.vendorEngineering.placeholder.score')"
          >
            <el-option
              v-for="item in optionsNew"
              :key="item.value"
              :label="item.name"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </div>
        <div class="flex-col colspan-7-3">
          <el-input
            v-model="appraiseItem[17].appraiseItemInapplicabilityExplain"
            :placeholder="$t('scheduleManager.vendorEngineering.placeholder.explain')"
            clearable
            class="filter-item"
          ></el-input>
        </div>

        <div class="flex-col flex-bg">{{ $t("scheduleManager.vendorEngineering.budgetAchievingRate") }}</div>
        <div class="flex-col flex-bg colspan-4-2">{{ $t("scheduleManager.vendorEngineering.managementFailure") }}</div>
        <div class="flex-col">
          <el-select
            v-model="appraiseItem[18].appraiseItemScore"
            :placeholder="$t('scheduleManager.vendorEngineering.placeholder.score')"
          >
            <el-option
              v-for="item in optionsNew"
              :key="item.value"
              :label="item.name"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </div>
        <div class="flex-col colspan-7-3">
          <el-input
            v-model="appraiseItem[18].appraiseItemInapplicabilityExplain"
            :placeholder="$t('scheduleManager.vendorEngineering.placeholder.explain')"
            clearable
            class="filter-item"
          ></el-input>
        </div>

        <div class="flex-col flex-bg">{{ $t("scheduleManager.vendorEngineering.requestPayment") }}</div>
        <div class="flex-col flex-bg colspan-4-2">{{ $t("scheduleManager.vendorEngineering.disputesArise") }}</div>
        <div class="flex-col">
          <el-select
            v-model="appraiseItem[19].appraiseItemScore"
            :placeholder="$t('scheduleManager.vendorEngineering.placeholder.score')"
          >
            <el-option
              v-for="item in optionsNew"
              :key="item.value"
              :label="item.name"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </div>
        <div class="flex-col colspan-7-3">
          <el-input
            v-model="appraiseItem[19].appraiseItemInapplicabilityExplain"
            :placeholder="$t('scheduleManager.vendorEngineering.placeholder.explain')"
            clearable
            class="filter-item"
          ></el-input>
        </div>

        <div class="flex-col flex-bg">價格</div>
        <div class="flex-col flex-bg colspan-4-2">與同業相比價格是否偏高或偏低。</div>
        <div class="flex-col">
          <el-select
            v-model="appraiseItem[20].appraiseItemScore"
            :placeholder="$t('scheduleManager.vendorEngineering.placeholder.score')"
          >
            <el-option
              v-for="item in optionsNew"
              :key="item.value"
              :label="item.name"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </div>
        <div class="flex-col colspan-7-3">
          <el-input
            v-model="appraiseItem[20].appraiseItemInapplicabilityExplain"
            :placeholder="$t('scheduleManager.vendorEngineering.placeholder.explain')"
            clearable
            class="filter-item"
          ></el-input>
        </div>

        <div class="flex-col flex-bg colspan-2-4">價格總分 (80)</div>
        <div class="flex-col bgeee colspan-6-4">{{ total6 }}</div>

        <div class="flex-col flex-bg coldiv-34-2">前展性</div>
        <div class="flex-col flex-bg">長期配合意願與發展能力</div>
        <div class="flex-col flex-bg colspan-4-2"></div>
        <div class="flex-col">
          <el-select
            v-model="appraiseItem[21].appraiseItemScore"
            :placeholder="$t('scheduleManager.vendorEngineering.placeholder.score')"
          >
            <el-option
              v-for="item in optionsNew"
              :key="item.value"
              :label="item.name"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </div>
        <div class="flex-col colspan-7-3">
          <el-input
            v-model="appraiseItem[21].appraiseItemInapplicabilityExplain"
            :placeholder="$t('scheduleManager.vendorEngineering.placeholder.explain')"
            clearable
            class="filter-item"
          ></el-input>
        </div>

        <div class="flex-col flex-bg">資訊透明度</div>
        <div class="flex-col flex-bg colspan-4-2"></div>
        <div class="flex-col">
          <el-select
            v-model="appraiseItem[22].appraiseItemScore"
            :placeholder="$t('scheduleManager.vendorEngineering.placeholder.score')"
          >
            <el-option
              v-for="item in optionsNew"
              :key="item.value"
              :label="item.name"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </div>
        <div class="flex-col colspan-7-3">
          <el-input
            v-model="appraiseItem[22].appraiseItemInapplicabilityExplain"
            :placeholder="$t('scheduleManager.vendorEngineering.placeholder.explain')"
            clearable
            class="filter-item"
          ></el-input>
        </div>

        <div class="flex-col flex-bg colspan-2-4">前展性總分 (20)</div>
        <div class="flex-col bgeee colspan-6-4">{{ total7 }}</div>

        <div class="flex-col colspan-1-5">採購評鑑總分 (100)</div>
        <div class="flex-col colspan-6-4">{{ appraiseData.purchaseTotalScore }}</div>

        <div class="flex-col colspan-1-5">「總分(工務+採購)」</div>
        <div class="flex-col colspan-6-4">
          {{ appraiseData.sumTotalScore }}
        </div>

        <div class="flex-col flex-bg colspan-1-9" style="justify-content: left;">
          {{ $t("scheduleManager.vendorConsumables.remarksOne") }}
        </div>
        <div class="flex-col flex-bg colspan-1-9" style="justify-content: left;">
          {{ $t("scheduleManager.vendorConsumables.remarksTwo") }}
        </div>

        <div class="flex-col flex-bg"> {{ $t("scheduleManager.vendorConsumables.opinion") }}</div>
        <div class="flex-col colspan-2-8">
          <el-input
            v-model="appraiseData.opinion"
            clearable
            class="filter-item"
          ></el-input>
        </div>

        <div class="flex-col flex-bg"> {{ $t("scheduleManager.vendorEngineering.selectionUnit") }}</div>
        <div class="flex-col colspan-2-8" style="text-align: center;">
          {{ bu }}
        </div>

        <div class="flex-col flex-bg" style="height:80px;">
          {{ $t("scheduleManager.vendorEngineering.approveName") }}<br/> BU Head
        </div>
        <div class="flex-col">
          <popover-select selectType="user" valueObjName="ename" @setValue="setApprove" v-model="appraiseData.approveName" :placeholder="$t('scheduleManager.vendorConsumables.placeholder.userNo')"></popover-select>
        </div>
        <div class="flex-col flex-bg"> {{ $t("scheduleManager.vendorEngineering.examineName") }}<br/> Line Manager</div>
        <div class="flex-col colspan-4-2">
          <popover-select selectType="user" valueObjName="ename" @setValue="setExamine" v-model="appraiseData.examineName" :placeholder="$t('scheduleManager.vendorConsumables.placeholder.userNo')"></popover-select>
        </div>
        <div class="flex-col flex-bg">{{ $t("scheduleManager.vendorEngineering.appreciatorName") }}</div>
        <div class="flex-col flex-bg">
          <popover-select selectType="user" valueObjName="ename" @setValue="setAppreciator" v-model="appraiseData.appreciatorName" :placeholder="$t('scheduleManager.vendorConsumables.placeholder.userNo')"></popover-select>
        </div>
        <div class="flex-col flex-bg">{{ $t("scheduleManager.vendorEngineering.purchaseName") }}</div>
        <div class="flex-col flex-bg">
          <popover-select selectType="user" valueObjName="ename" @setValue="setPurchaser" v-model="appraiseData.purchaserName" :placeholder="$t('scheduleManager.vendorConsumables.placeholder.userNo')"></popover-select>
        </div>
      </div>
    </div>
    <div class="yt-data-btn bt30">
      <div class="yt-btn yt-btn-ys" @click="save()" type="primary">{{ $t("button.submit") }}</div>
      <div class="yt-btn yt-ml8" @click="getBack">{{ $t("button.cancel") }}</div>
    </div>
  </div>
</template>

<script>
  import {
    queryEpcAppraise,
    saveEpcAppraise
  } from '@/api/scheduleManager/projectProgress';
  import { getUserInfoByName } from '@/api/dict/dictValue/index';
  import popoverSelect from '@/components/popover-select/index.vue';
  import { Throttle } from '@/utils/types';

  export default {
    name: 'vendorEngineering',
    components: {
      popoverSelect
    },
    data() {
      return {
        total1: '', // 交期總分
        total2: '', // 品質總分 (25)
        total3: '', // 配合度總分 (15)
        total4: '', // 專業度總分 (10)
        total5: '', // 管理總分 (20)
        total6: '', // 價格總分 (80)
        total7: '', // 前展性總分 (20)
        firstProportion: this.$store.getters.allDic.firstVendorEPCProportion,
        secondProportion: this.$store.getters.allDic.secondVendorEPCProportion,
        assessStartDate: '',
        assessEndDate: '',
        optionsProject: [],
        fromData: {
          applyProjectTravelling: {
            id: '', // id
            ename: '', // 申请人职称
            username: '' // 费用使用人ID
          },
          detailList: []
        },
        appraiseTime: [],
        appraiseData: {
          totalScore: '',
          purchaseTotalScore: '',
          sumTotalScore: ''
        },
        bu: '',
        vendorItem: '',
        appreciatorName: '',
        userList: [],
        optionsNew: [
          {
            name: this.$t('scheduleManager.vendorEngineering.zero'),
            value: '0'
          },
          {
            name: this.$t('scheduleManager.vendorEngineering.one'),
            value: '1'
          },
          {
            name: this.$t('scheduleManager.vendorEngineering.two'),
            value: '2'
          }, {
            name: this.$t('scheduleManager.vendorEngineering.three'),
            value: '3'
          }, {
            name: this.$t('scheduleManager.vendorEngineering.four'),
            value: '4'
          }, {
            name: this.$t('scheduleManager.vendorEngineering.five'),
            value: '5'
          }, {
            name: this.$t('scheduleManager.vendorEngineering.six'),
            value: '6'
          }, {
            name: this.$t('scheduleManager.vendorEngineering.seven'),
            value: '7'
          }, {
            name: this.$t('scheduleManager.vendorEngineering.eight'),
            value: '8'
          },
          {
            name: this.$t('scheduleManager.vendorEngineering.nine'),
            value: '9'
          },
          {
            name: this.$t('scheduleManager.vendorEngineering.ten'),
            value: '10'
          }, {
            name: this.$t('scheduleManager.vendorEngineering.notApplicable'),
            value: -1
          }
        ],
        appraiseItem: [
          {
            appraiseItemScore: '',
            appraiseItemInapplicabilityExplain: '',
            sumMax: '10'
          },
          {
            appraiseItemScore: '',
            appraiseItemInapplicabilityExplain: '',
            sumMax: '10'
          },
          {
            appraiseItemScore: '',
            appraiseItemInapplicabilityExplain: '',
            sumMax: '10'
          },
          {
            appraiseItemScore: '',
            appraiseItemInapplicabilityExplain: '',
            sumMax: '10'
          },
          {
            appraiseItemScore: '',
            appraiseItemInapplicabilityExplain: '',
            sumMax: '10'
          },
          {
            appraiseItemScore: '',
            appraiseItemInapplicabilityExplain: '',
            sumMax: '10'
          },
          {
            appraiseItemScore: '',
            appraiseItemInapplicabilityExplain: '',
            sumMax: '10'
          },
          {
            appraiseItemScore: '',
            appraiseItemInapplicabilityExplain: '',
            sumMax: '10'
          },
          {
            appraiseItemScore: '',
            appraiseItemInapplicabilityExplain: '',
            sumMax: '10'
          },
          {
            appraiseItemScore: '',
            appraiseItemInapplicabilityExplain: '',
            sumMax: '10'
          },
          {
            appraiseItemScore: '',
            appraiseItemInapplicabilityExplain: '',
            sumMax: '10'
          },
          {
            appraiseItemScore: '',
            appraiseItemInapplicabilityExplain: '',
            sumMax: '10'
          },
          {
            appraiseItemScore: '',
            appraiseItemInapplicabilityExplain: '',
            sumMax: '10'
          },
          {
            appraiseItemScore: '',
            appraiseItemInapplicabilityExplain: '',
            sumMax: '10'
          },
          {
            appraiseItemScore: '',
            appraiseItemInapplicabilityExplain: '',
            sumMax: '10'
          },
          {
            appraiseItemScore: '',
            appraiseItemInapplicabilityExplain: '',
            sumMax: '10'
          },
          {
            appraiseItemScore: '',
            appraiseItemInapplicabilityExplain: '',
            sumMax: '10'
          },
          {
            appraiseItemScore: '',
            appraiseItemInapplicabilityExplain: '',
            sumMax: '10'
          },
          {
            appraiseItemScore: '',
            appraiseItemInapplicabilityExplain: '',
            sumMax: '10'
          },
          {
            appraiseItemScore: '',
            appraiseItemInapplicabilityExplain: '',
            sumMax: '10'
          },
          {
            appraiseItemScore: '',
            appraiseItemInapplicabilityExplain: '',
            sumMax: '10'
          },
          {
            appraiseItemScore: '',
            appraiseItemInapplicabilityExplain: '',
            sumMax: '10'
          },
          {
            appraiseItemScore: '',
            appraiseItemInapplicabilityExplain: '',
            sumMax: '10'
          }
        ]
      };
    },
    mounted() {
      this.getData();
      console.info(Throttle, 'Throttle');
    },
    methods: {
      // 选择人员查询条件
      queryList(queryString, clear) {
        if (clear) {
          this.fromData.applyProjectTravelling.id = ''
          this.fromData.applyProjectTravelling.ename = ''
          this.fromData.applyProjectTravelling.username = ''
        }
        const obj = {
          projectNo: queryString,
          limit: '5'
        }
        getUserInfoByName(obj).then(res => {
          this.optionsProject = res.data.rows
        });
      },
      setApprove(item) {
        this.appraiseData.approve = item.id;
      },
      setExamine(item) {
        this.appraiseData.examine = item.id;
      },
      setAppreciator(item) {
        this.appraiseData.appreciator = item.id;
      },
      // 采購責任人
      setPurchaser(item) {
        this.appraiseData.purchaser = item.id;
      },
      getUserList(queryString, cb) {
        getUserInfoByName({ username: queryString }).then(res => {
          const userList = res.data.rows;
          for (let i = 0; i < userList.length; i++) {
            userList[i].value = userList[i].ename;
          }
          cb(userList);
        });
      },
      getData() {
        const a = {
          projectVendorId: this.$route.query.queryId
        };
        if (this.$route.query.queryId) {
          queryEpcAppraise(a).then(res => {
            if (res.status === 200) {
              this.appraiseData = res.data.vendorEpcAppraise;
              if (this.appraiseData.vendorItem) {
                // 获得采购项目
                this.appraiseData.vendorItem.forEach((itme, index) => {
                  this.vendorItem += itme
                  this.vendorItem += index < this.appraiseData.vendorItem.length - 1 ? '</br>' : ''
                })
              }

              // 评鉴人
              if (this.appraiseData.appreciatorName) {
                this.bu = this.appraiseData.appreciatorBu ? this.appraiseData.appreciatorBu : this.$store.getters.info.bu
                const name = this.$store.getters.info.ename || this.$store.getters.info.name;
                this.appreciatorName = this.appraiseData.appreciatorName ? this.appraiseData.appreciatorName : name
              } else {
                this.bu = this.$store.getters.info.bu;
                this.appreciatorName =
                this.$store.getters.info.ename || this.$store.getters.info.name;
                if (res.data.engineer) {
                  this.$set(this.appraiseData, 'appreciator', res.data.engineer.id || '')
                  this.$set(this.appraiseData, 'appreciatorName', res.data.engineer.ename || '')
                } else {
                  this.$set(this.appraiseData, 'appreciator', '')
                  this.$set(this.appraiseData, 'appreciatorName', '')
                }
              }

              // 采购评鉴人
              if (!this.appraiseData.purchaserName) {
                if (res.data.purchaser) {
                  this.$set(this.appraiseData, 'purchaser', res.data.purchaser.id || '')
                  this.$set(this.appraiseData, 'purchaserName', res.data.purchaser.ename || '')
                } else {
                  this.$set(this.appraiseData, 'purchaser', '')
                  this.$set(this.appraiseData, 'purchaserName', '')
                }
              }


              if (!res.data.vendorEpcAppraise.assessStartDate) {
                if (this.$route.query.start) {
                  this.assessStartDate = this.$route.query.start
                }
              } else {
                this.assessStartDate = res.data.vendorEpcAppraise.assessStartDate
              }
              if (!res.data.vendorEpcAppraise.assessEndDate) {
                if (this.$route.query.end) {
                  this.assessEndDate = this.$route.query.end
                }
              } else {
                this.assessEndDate = res.data.vendorEpcAppraise.assessEndDate
              }
              if (res.data.list) {
                res.data.list.forEach(x => {
                  this.appraiseItem[x.appraiseItemSeq].appraiseItemScore =
                  x.appraiseItemScore;
                  this.appraiseItem[
                    x.appraiseItemSeq
                  ].appraiseItemInapplicabilityExplain =
                  x.appraiseItemInapplicabilityExplain;
                  this.appraiseItem[x.appraiseItemSeq].id = x.id;
                });
              }
              if (!this.appraiseData.jobContent) {
                this.appraiseData.jobContent = this.$route.query.item
              }

              if (!this.appraiseData.approve) {
                if (res.data.bgAudit) {
                  this.$set(this.appraiseData, 'approve', res.data.bgAudit.id || '')
                  this.$set(this.appraiseData, 'approveName', res.data.bgAudit.ename || '')
                } else {
                  this.$set(this.appraiseData, 'approve', '')
                  this.$set(this.appraiseData, 'approveName', '')
                }
              }
              if (!this.appraiseData.examine) {
                if (res.data.buAudit) {
                  this.$set(this.appraiseData, 'examine', res.data.buAudit.id || '')
                  this.$set(this.appraiseData, 'examineName', res.data.buAudit.ename || '')
                } else {
                  this.$set(this.appraiseData, 'examine', '')
                  this.$set(this.appraiseData, 'examineName', '')
                }
              }
            } else {
              this.$message.error(res.message);
            }
          });
        }
      },
      getBack() {
        this.$router.go(-1);
      },
      save: Throttle(function() {
        // let flag = false;
        let flagg = false;
        console.log(this.appraiseItem)
        console.log(this.appraiseData)
        this.appraiseItem.forEach(item => {
          if (item.appraiseItemScore === -1) {
            if (item.appraiseItemInapplicabilityExplain === '') {
              this.$message.error(this.$t('scheduleManager.vendorEngineering.tips.isNotApplicable'));
              flagg = true;
              return;
            }
          }
          // console.log(item.appraiseItemScore === '', item.hasOwnProperty('appraiseItemScore'), 'item.appraiseItemScore')
          // 现在是两个人分别评分了 不能在做这个验证了
          /* if (item.appraiseItemScore === undefined || item.appraiseItemScore === '') {
            flag = true;
            return;
          } */
        });
        this.appraiseData.assessStartDate = this.assessStartDate
        this.appraiseData.assessEndDate = this.assessEndDate
        if (
          !this.appraiseData.assessStartDate || !this.appraiseData.assessEndDate
        ) {
          this.$message.error(this.$t('scheduleManager.vendorEngineering.pleaseCheckTime')); // 请选择评鉴期间
          return;
        }
        console.log(this.appraiseData)
        if (!this.appraiseTime) {
          this.$message.error(this.$t('scheduleManager.vendorEngineering.placeholder.appraiseTime'));
          return;
        } else if (this.appraiseData.jobContent === '' || !this.appraiseData.hasOwnProperty('jobContent')) {
          this.$message.error(this.$t('scheduleManager.vendorEngineering.placeholder.jobContent'));
          return;
        } else if (this.appraiseData.approveName === '' || !this.appraiseData.hasOwnProperty('approveName')) {
          this.$message.error(this.$t('scheduleManager.vendorEngineering.placeholder.approveName'));
          return;
        } else if (this.appraiseData.examineName === '' || !this.appraiseData.hasOwnProperty('examineName')) {
          this.$message.error(this.$t('scheduleManager.vendorEngineering.placeholder.examineName'));
          return;
        }
        // console.log(flag, '请填写 评分')
        /* if (flag) {
          this.$message.error(this.$t('scheduleManager.vendorEngineering.checkTips')); // 请填写 评分
          return false;
        } */
        if (flagg) {
          this.$message.error(this.$t('scheduleManager.vendorEngineering.pleaseGiveReason')); // 请说明不适用的理由
          return false;
        }
        this.appraiseData.progressId = this.$route.query.progressId;
        this.appraiseData.projectVendorId = this.$route.query.queryId;
        for (let i = 0; i < this.appraiseItem.length; i++) {
          this.appraiseItem[i].appraiseItemSeq = i;
        }
        const data = {
          vendorEpcAppraise: this.appraiseData,
          list: this.appraiseItem
        };
        saveEpcAppraise(data).then(res => {
          if (res.status === 200) {
            this.$message.success(this.$t('scheduleManager.vendorEngineering.tips.success'));
            const str = '/progressManager/worksDetails'
            this.$store.getters.pageState[str] = {}
            this.$router.push({
              path: '/progressManager/worksDetails',
              query: { progressId: this.$route.query.progressId }
            });
          } else {
            this.$message.error(res.message);
          }
        });
      }, 2000)
    },
    watch: {
      appraiseItem: {
        handler(newValue) {
          this.appraiseData.totalScore = '';
          this.appraiseData.purchaseTotalScore = '';
          this.total1 = '';
          this.total2 = '';
          this.total3 = '';
          this.total4 = '';
          this.total5 = '';
          this.total6 = '';
          this.total7 = '';
          if (newValue.length > 0) {
            const arr1 = newValue.slice(0, 17);
            const arr2 = newValue.slice(17);
            for (let i = 0; i < arr1.length; i++) {
              let first = 0;
              let second = 0;
              second = Number(this.secondProportion[i].remark)
              // 获取大类和小类的占比
              // 交期總分 0-2 total1 1
              if (i <= 2) {
                this.firstProportion.forEach(v => {
                  if (v.value === '1') {
                    first = Number(v.remark)
                  }
                })
                if (
                  arr1[i].appraiseItemScore &&
                  arr1[i].appraiseItemScore !== -1
                ) {
                  if (this.total1 === '') {
                    this.total1 = 0
                  }
                  // 得分/10*大类占比*小类占比*100
                  this.total1 += Number(arr1[i].appraiseItemScore) / 10 * first * second * 100
                }
              }
              // 品質總分 3-6 total2 2
              if (i > 2 && i <= 6) {
                this.firstProportion.forEach(v => {
                  if (v.value === '2') {
                    first = Number(v.remark)
                  }
                })
                if (
                  arr1[i].appraiseItemScore &&
                  arr1[i].appraiseItemScore !== -1
                ) {
                  if (this.total2 === '') {
                    this.total2 = 0
                  }
                  this.total2 += Number(arr1[i].appraiseItemScore) / 10 * first * second * 100
                }
              }
              // 配合度總分 7-9 total3 3
              if (i > 6 && i <= 9) {
                this.firstProportion.forEach(v => {
                  if (v.value === '3') {
                    first = Number(v.remark)
                  }
                })
                if (
                  arr1[i].appraiseItemScore &&
                  arr1[i].appraiseItemScore !== -1
                ) {
                  if (this.total3 === '') {
                    this.total3 = 0
                  }
                  this.total3 += Number(arr1[i].appraiseItemScore) / 10 * first * second * 100
                }
              }
              // 管理總分 10-14 total4 4
              if (i > 9 && i <= 14) {
                this.firstProportion.forEach(v => {
                  if (v.value === '4') {
                    first = Number(v.remark)
                  }
                })
                if (
                  arr1[i].appraiseItemScore &&
                  arr1[i].appraiseItemScore !== -1
                ) {
                  if (this.total4 === '') {
                    this.total4 = 0
                  }
                  this.total4 += Number(arr1[i].appraiseItemScore) / 10 * first * second * 100
                }
              }
              // 專業度總分 15-16 total5  5
              if (i > 14 && i <= 16) {
                this.firstProportion.forEach(v => {
                  if (v.value === '5') {
                    first = Number(v.remark)
                  }
                })
                if (
                  arr1[i].appraiseItemScore &&
                  arr1[i].appraiseItemScore !== -1
                ) {
                  if (this.total5 === '') {
                    this.total5 = 0
                  }
                  this.total5 += Number(arr1[i].appraiseItemScore) / 10 * first * second * 100
                }
              }
            }
            if (this.total1) {
              if (!this.appraiseData.totalScore) {
                this.appraiseData.totalScore = 0
              }
              this.appraiseData.totalScore += this.total1
              this.total1 = this.total1.toFixed(2)
            }
            if (this.total2) {
              if (!this.appraiseData.totalScore) {
                this.appraiseData.totalScore = 0
              }
              this.appraiseData.totalScore += this.total2
              this.total2 = this.total2.toFixed(2)
            }
            if (this.total3) {
              if (!this.appraiseData.totalScore) {
                this.appraiseData.totalScore = 0
              }
              this.appraiseData.totalScore += this.total3
              this.total3 = this.total3.toFixed(2)
            }
            if (this.total4) {
              if (!this.appraiseData.totalScore) {
                this.appraiseData.totalScore = 0
              }
              this.appraiseData.totalScore += this.total4
              this.total4 = this.total4.toFixed(2)
            }
            if (this.total5) {
              if (!this.appraiseData.totalScore) {
                this.appraiseData.totalScore = 0
              }
              this.appraiseData.totalScore += this.total5
              this.total5 = this.total5.toFixed(2)
            }
            if (this.appraiseData.totalScore) {
              this.appraiseData.totalScore = this.appraiseData.totalScore.toFixed(2)
            }
            // 11-03 选项出现不适用的情况;获取不适用项的配置比例
            // 在最终结果前进行计算
            const count = []
            const isCheck = []
            const endCount = []
            const endIsCheck = []
            for (let i = 0; i < arr2.length; i++) {
              if (i <= 3) {
                count.push(this.secondProportion[i + 17])
                if (arr2[i].appraiseItemScore !== -1) {
                  isCheck.push(this.secondProportion[i + 17])
                }
              }
              if (i > 3 && i <= 5) {
                endCount.push(this.secondProportion[i + 17])
                if (arr2[i].appraiseItemScore !== -1) {
                  endIsCheck.push(this.secondProportion[i + 17])
                }
              }
            }
            // eslint-disable-next-line no-unused-vars
            const diff = count.filter(val => isCheck.indexOf(val) === -1)
            const diff2 = endCount.filter(val => endIsCheck.indexOf(val) === -1)
            let isValue = 0
            for (let i = 0; i < diff.length; i++) {
              isValue += Number(diff[i].remark)
            }
            let endIsValue = 0
            for (let i = 0; i < diff2.length; i++) {
              endIsValue += Number(diff2[i].remark)
            }
            for (let i = 0; i < arr2.length; i++) {
              let first = 0;
              let second = 0;
              second = Number(this.secondProportion[i + 17].remark)
              // 获取大类和小类的占比
              // 價格總分 17-20 total6 6
              if (i <= 3) {
                this.firstProportion.forEach(v => {
                  if (v.value === '6') {
                    first = Number(v.remark)
                  }
                })
                if (arr2[i].appraiseItemScore && arr2[i].appraiseItemScore !== -1) {
                  if (this.total6 === '') {
                    this.total6 = 0
                  }
                  this.total6 += Number(arr2[i].appraiseItemScore) / 10 * first * second * 100
                }
              }
              // 前展性 21-22 total7 7
              if (i > 3 && i <= 5) {
                this.firstProportion.forEach(v => {
                  if (v.value === '7') {
                    first = Number(v.remark)
                  }
                })
                if (
                  arr2[i].appraiseItemScore &&
                  arr2[i].appraiseItemScore !== -1
                ) {
                  if (this.total7 === '') {
                    this.total7 = 0
                  }
                  this.total7 += Number(arr2[i].appraiseItemScore) / 10 * first * second * 100
                }
              }
            }
            if (this.total6) {
              if (!this.appraiseData.purchaseTotalScore) {
                this.appraiseData.purchaseTotalScore = 0
              }
              if (diff.length === 1 || diff.length === 3) {
                this.total6 = this.total6 * isValue + this.total6
              } else if (diff.length === 2) {
                this.total6 = this.total6 / isValue
              }
              this.appraiseData.purchaseTotalScore += this.total6
              this.total6 = this.total6.toFixed(2)
            }
            if (this.total7) {
              if (!this.appraiseData.purchaseTotalScore) {
                this.appraiseData.purchaseTotalScore = 0
              }
              if (diff2.length > 0) {
                this.total7 = this.total7 / endIsValue
              }
              this.appraiseData.purchaseTotalScore += this.total7
              this.total7 = this.total7.toFixed(2)
            }
            if (this.appraiseData.purchaseTotalScore) {
              this.appraiseData.purchaseTotalScore = this.appraiseData.purchaseTotalScore.toFixed(2)
            }
            // 11-03
            this.appraiseData.sumTotalScore =
              (Number(this.appraiseData.totalScore) + Number(this.appraiseData.purchaseTotalScore)) / 2
            this.appraiseData.sumTotalScore = this.appraiseData.sumTotalScore.toFixed(2)
            const array1 = arr1.filter(v => v.appraiseItemScore)
            const array2 = arr2.filter(v => v.appraiseItemScore)
            if (array1.length === 0) {
              this.appraiseData.totalScore = ''
            }
            if (array2.length === 0) {
              this.appraiseData.purchaseTotalScore = '';
            }
          }
        },
        deep: true
      }
    }
  };
</script>
<style scoped lang="scss">
  .yt-table-text {
    margin: 0 auto;
    line-height: 20px;
    width: 180px;
    white-space: normal;
  }

  .vendorEngineering {
    margin: 24px 0;
    padding: 5px 0;
    background-color: #fff;

    .title {
      width: 80%;
      margin: 0 auto;
      text-align: center;
      font-size: 20px;
      font-weight: bold;
      color: #212121;
      height: 50px;
      line-height: 50px;
      border-bottom: 1px solid #d9d9d9;
    }

    .yt-box-flex {
      margin: 26px auto;
      width: 96%;

      .flex-grid {
        width: 100%;
        display: grid;
        grid-template-columns: 140px 140px 180px 105px 140px 105px 140px 105px auto;
        grid-template-rows: auto;
        grid-auto-flow: row;
        border: 1px solid #d9d9d9;
        border-width: 1px 1px 0px 0px;
      }
      .colspan-7-3 {
        grid-column: 7 / span 3;
      }
      .colspan-1-9 {
        grid-column: 1 / span 9;
      }
      .colspan-1-5 {
        grid-column: 1 / span 5;
      }
      .colspan-1-3 {
        grid-column: 1 / span 3;
      }
      .colspan-2-2 {
        grid-column: 2 / span 2;
      }
      .colspan-2-3 {
        grid-column: 2 / span 3;
      }
      .colspan-2-4 {
        grid-column: 2 / span 4;
      }
      .colspan-2-8 {
        grid-column: 2 / span 8;
      }
      .colspan-4-2 {
        grid-column: 4 / span 2;
      }
      .colspan-4-4 {
        grid-column: 4 / span 4;
      }
      .colspan-5-2 {
        grid-column: 5 / span 2;
      }
      .colspan-5-3 {
        grid-column: 5 / span 3;
      }
      .colspan-6-4 {
        grid-column: 6 / span 4;
      }
      .coldiv-5-9 {
        grid-row-start: 5;
        grid-row-end: span 9;
      }
      .coldiv-6-3 {
        grid-row-start: 6;
        grid-row-end: span 3;
      }
      .coldiv-9-3 {
        grid-row-start: 9;
        grid-row-end: span 3;
      }
      .coldiv-9-4 {
        grid-row-start: 9;
        grid-row-end: span 4;
      }
      .coldiv-13-3 {
        grid-row-start: 13;
        grid-row-end: span 3;
      }
      .coldiv-16-5 {
        grid-row-start: 16;
        grid-row-end: span 5;
      }
      .coldiv-21-3 {
        grid-row-start: 21;
        grid-row-end: span 3;
      }
      .coldiv-25-2 {
        grid-row-start: 25;
        grid-row-end: span 2;
      }
      .coldiv-6-22 {
        grid-row-start: 6;
        grid-row-end: span 22;
      }
      .coldiv-10-4 {
        grid-row-start: 10;
        grid-row-end: span 4;
      }
      .coldiv-15-3 {
        grid-row-start: 15;
        grid-row-end: span 3;
      }
      .coldiv-18-5 {
        grid-row-start: 19;
        grid-row-end: span 5;
      }
      .coldiv-25-2 {
        grid-row-start: 25;
        grid-row-end: span 2;
      }
      .coldiv-29-8 {
        grid-row-start: 29;
        grid-row-end: span 8;
      }
      .coldiv-29-4 {
        grid-row-start: 29;
        grid-row-end: span 4;
      }
      .coldiv-34-2 {
        grid-row-start: 34;
        grid-row-end: span 2;
      }
      .flex-col {
        padding: 12px 5px;
        border: 1px solid #d9d9d9;
        border-width: 0 0 1px 1px;
        font-size: 14px;
        display: flex;
        justify-content: center;
        align-items: center;
        word-break:break-all;
      }
      .bgeee {
        background-color: #eee;
        text-align: center;
      }
      .flex-bg {
        background-color: #f1f4f3;
        text-align: center;
        font-weight: bold;
      }
    }
  }
</style>
